<template>
	<view class="content">
		<mp-select @click1="click1" @click="click"></mp-select>
		<view class="head">
			<uni-easyinput suffixIcon="search" class="search" v-model="value" placeholder="请输入内容" @iconClick="onClick">
			</uni-easyinput>
		</view>
		<view class="select_type_panel">
			<view v-for="(item,index) in selectLists" @click="SelectTypeClick(index)">
				<text class="select_type_text select_type_item select_panel" v-if="select_type == index">{{item}}</text>
				<text class="select_type_text select_type_item unselect_panel" v-else>{{item}}</text>
			</view>
		</view>
		<view class="scroll_panel">
			<view class="scroll_content">
				<skill-item :itemdata="item" v-for="(item,index) in server_infolists" @click="SelectInfoClick(index)" @islove="Clisk_isLove">
				</skill-item>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: "",
				selectLists: [
					"热门",
					"最新"
				],
				love_icon:"../../../../static/dating/love.png",
				love_icon2:"../../../../static/dating/unlove.png",
				select_type: 0,
				server_infolists: [{
					title: "装备组合",
					title_detail: "60级 健吾当",
					headurl: "../../../../static/home/jineng/jineng-add.png",
					pushtime: "2021-10-19",
					playername:"大爷大爷大爷大爷大爷大爷",
					lovesvalue:0,
					isMylove:false
				},
				{
					title: "装备组合",
					title_detail: "60级 健吾当",
					headurl: "../../../../static/home/jineng/jineng-add.png",
					pushtime: "2021-10-19",
					playername:"大爷大爷大爷大爷大爷大爷",
					lovesvalue:1,
					isMylove:true
				}
				],
			}
		},
		methods: {
			click1(e) {
				console.log(e)
			},
			click(e) {
				console.log(e)
			},
			onClick() {

			},
			SelectTypeClick(index) {
				this.select_type = index
			},
			SelectInfoClick(index) {

			},
			Clisk_isLove(e)
			{
				let index = e[0]
				let islove = e[1]
				// if(this.server_infolists[index].isMylove)
				// {
				// 	this.server_infolists[index].isMylove =false
				// }else
				// {
				// 	this.server_infolists[index].isMylove =true
				// }
				
			}
		}
	}
</script>

<style>
	.content {
		/* 		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding-bottom: 60rpx; */
	}

	.search {
		width: 80%;
		text-align: center;
		margin-left: 10%;
	}

	.select_type_panel {
		float: left;
		height: 80rpx;
		width: 100%;
		background-color: #000000;
	}

	.select_type_item {
		float: left;
		width: 100rpx;
		height: 60rpx;
		text-align: center;
		margin: 10rpx;
		border: solid #000000 2rpx;
	}

	.select_type_text {
		margin-top: 10rpx;
		line-height: 60rpx;
		height: 60rpx;
	}

	.unselect_panel {
		background-color: #FFFFFF;
		color: #57BEF2;
		border: solid #808080 1rpx;
	}

	.select_panel {
		border: solid #57BEF2 1rpx;
		background-color: #57BEF2;
		color: #FFFFFF;
	}

	

</style>
